<%--
  Created by IntelliJ IDEA.
  User: XMY
  Date: 2019-02-20
  Time: 10:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="./css/login.css">
    <style type="text/css">
        #yzmReg{
            color: red;
        }
        .btn{
            border-radius: 20px;
            width: 120px;
            height: 30px;
            background-color: deepskyblue;
            color: white;
        }
    </style>
</head>
<body>
<form  method="post" action="resgistServlet?method=regist" onsubmit="return check()">
    <div class="regist">
        <div class="regist_center">
            <div class="regist_top">
                <div class="left fl">会员注册</div>
                <div class="right fr"><a href="index.jsp" target="_self">小米商城</a></div>
                <div class="clear"></div>
                <div class="xian center"></div>
            </div>
            <div class="regist_main center">
                <div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;<input class="shurukuang" type="text" name="username" placeholder="请输入你的用户名" id="name"/><span id="nameReg">请不要输入汉字</span></div>
                <div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="password" placeholder="请输入你的密码" id="pwd"/><span>请输入6位以上字符</span></div>
                <div class="username">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:&nbsp;&nbsp;<input class="shurukuang" type="text" name="nc" placeholder="请输入昵称" id="nc"/></div>
                <div class="username">确认密码:&nbsp;&nbsp;<input class="shurukuang" type="password" name="repassword" placeholder="请确认你的密码" id="rpwd"/><span>两次密码要输入一致哦</span></div>
                <div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;<input class="shurukuang" type="text" name="tel" placeholder="请填写正确的手机号" id="phone"/><span><input type="button" class="btn" value="获取验证码" id="getYzm" onclick="codeButton()" height="30"></span></div>
                <div class="username">
                    <div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="yanzhengma" type="text" name="username" placeholder="请输入验证码"/></div>
                    <div class="right fl"></div>
                    <div class="clear" id="yzmReg"></div>
                </div>
            </div>
            <div class="regist_submit">
                <input class="submit" type="submit" name="submit" value="立即注册" >
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    var yzm;//验证码
    var regName;//判断用户名是否存在
    
    //表单验证
    function check() {
        var regName =/^[\u4e00-\u9fa5]+$/;
        var name = $("#name").val();
        var pwd = $("#pwd").val();
        var rpwd = $("#rpwd").val();
        var phone = $("#phone").val();
        var inputYzm = $(".yanzhengma").val();
        var nickname = $("#nc").val();
        if (name==""){
            alert("用户名不能为空！");
            return false;
        }
        if (nickname==""){
            alert("昵称不能为空！");
            return false;
        }
        if (regName==false) {
            return false;
        }
        if (pwd==""){
            alert("密码不能为空！");
            return false;
        }
        if (rpwd==""){
            alert("请确认密码！")
            return false;
        }
        if (phone==""){
            alert("请输入电话号码！")
            return false;
        }
        if (regName.test(name)){
            alert("用户名不能包含汉字！");
            return false;
        }
        if (pwd.length<6){
            alert("密码长度必须大于6位！")
            return false;
        }
        if (pwd!=rpwd){
            alert("两次密码输入不一致！")
            return false;
        }
        if (inputYzm!=yzm){
            $("#yzmReg").html("验证码错误！")
            return false;
        }
        alert("注册成功！点击跳转到主页")
        return true;
    }



    //判断用户名是否存在
    $("body").on("blur","#name",function () {
        var name = $("#name").val();
        var $name = $("#nameReg");
        if (name!=""){
            $.post("resgistServlet","method=regName&name="+name,function (data) {
                $name.html("");
                if (data>0){
                    $name.html("用户名已存在！");
                    $name.css("color","red");
                    regName = false;
                }else{
                    $name.html("<img src='./image/对勾.png\' height='30' width='30'>");
                    regName = true;
                }
            })
        }
    })

    //验证码获取之后倒计时
    function codeButton(){
        var phone = $("#phone").val();
        $.post("noteServlet","tel="+phone,function (data) {
            yzm = data;
        })
        var code = $("#getYzm");
        code.attr("disabled","disabled");
        setTimeout(function(){
            code.css("opacity","0.8");
        },1000)
        var time = 60;
        var set=setInterval(function(){
            code.val("("+--time+")秒后重新获取");
        }, 1000);
        setTimeout(function(){
            code.attr("disabled",false).val("重新获取验证码");
            clearInterval(set);
        }, 60000);
    }
</script>
</body>
</html>
